<template>
    <view class="login-container">
        <!-- 顶部状态栏 -->
<!--        <view class="status-bar">
            <view class="tab-group">
                <view 
                    class="tab-item" 
                    :class="{ active: isLogin }"
                    @tap="isLogin = true"
                >登录</view>
               <view 
                    class="tab-item" 
                    :class="{ active: !isLogin }"
                    @tap="isLogin = false"
                >注册</view>
                <view class="tab-line" :class="{ 'tab-line-right': !isLogin }"></view>
            </view>
        </view> -->
        
        <!-- 主内容区 -->
        <view class="content">
            <!-- 欢迎语 -->
            <view class="welcome">
                <text class="title">{{ isLogin ? '欢迎回来' : '创建账号' }}</text>
                <text class="subtitle">{{ isLogin ? '很高兴再次见到您' : '开启您的专属旅程' }}</text>
            </view>
            
            <!-- 表单区域 -->
            <view class="form">
                <view class="form-item">
                    <text class="label">用户名</text>
                    <input 
                        type="text"
                        v-model="form.username"
                        placeholder="请输入用户名"
                        :placeholder-style="placeholderStyle"
                    />
                </view>
                
                <template v-if="!isLogin">
                    <view class="form-item">
                        <text class="label">手机号</text>
                        <input 
                            type="number"
                            v-model="form.phone"
                            maxlength="11"
                            placeholder="请输入手机号"
                            :placeholder-style="placeholderStyle"
                        />
                    </view>
                    
                    <view class="form-item verify">
                        <text class="label">验证码</text>
                        <input 
                            type="number"
                            v-model="form.verifyCode"
                            maxlength="6"
                            placeholder="请输入验证码"
                            :placeholder-style="placeholderStyle"
                        />
                        <text 
                            class="verify-btn"
                            :class="{ disabled: counting }"
                            @tap="getVerifyCode"
                        >{{ counting ? `${counter}s` : '获取验证码' }}</text>
                    </view>
                </template>
                
                <view class="form-item">
                    <view class="password-header">
                        <text class="label">密码</text>
                        <text v-if="isLogin" class="forget-pwd" @tap="goForgetPassword">忘记密码？</text>
                    </view>
                    <input 
                        type="password"
                        v-model="form.password"
                        placeholder="请输入密码"
                        :placeholder-style="placeholderStyle"
                    />
                </view>
                
                <view class="form-item" v-if="!isLogin">
                    <text class="label">确认密码</text>
                    <input 
                        type="password"
                        v-model="form.confirmPassword"
                        placeholder="请再次输入密码"
                        :placeholder-style="placeholderStyle"
                    />
                </view>
            </view>
            
            <!-- 底部按钮区域 -->
            <view class="bottom">
                <button class="submit-btn" @tap="handleSubmit">
                    {{ isLogin ? '登 录' : '注 册' }}
                </button>
                
                <view class="tips">
                    <view class="privacy-check">
                        <checkbox 
                            :checked="isAgreePrivacy" 
                            @tap="isAgreePrivacy = !isAgreePrivacy"
                            color="#333"
                        />
                        <text>我已阅读并同意</text>
                        <text class="link" @tap.stop="showPrivacyPolicy('用户协议')">《用户协议》</text>
                        <text>和</text>
                        <text class="link" @tap.stop="showPrivacyPolicy('隐私政策')">《隐私政策》</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'loginC',
    data() {
        return {
            isLogin: true,
            form: {
                username: '',
                phone: '',
                verifyCode: '',
                password: '',
                confirmPassword: ''
            },
            counting: false,
            counter: 60,
            placeholderStyle: 'color: #bbb; font-size: 28rpx;',
            isAgreePrivacy: false
        }
    },
    methods: {
        // 获取验证码
        getVerifyCode() {
            if (this.counting) return
            
            if (!this.form.phone) {
                uni.showToast({
                    title: '请输入手机号',
                    icon: 'none'
                })
                return
            }
            
            if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
                uni.showToast({
                    title: '手机号格式不正确',
                    icon: 'none'
                })
                return
            }
            
            console.log('获取验证码：', this.form.phone)
            
            this.counting = true
            this.counter = 60
            const timer = setInterval(() => {
                this.counter--
                if (this.counter <= 0) {
                    clearInterval(timer)
                    this.counting = false
                }
            }, 1000)
            
            uni.showToast({
                title: '验证码已发送',
                icon: 'success'
            })
        },
        
        // 提交表单
        handleSubmit() {
            if (!this.isAgreePrivacy) {
                uni.showToast({
                    title: '请先同意用户协议和隐私政策',
                    icon: 'none'
                })
                return
            }
            
            if (this.isLogin) {
                if (!this.form.username || !this.form.password) {
                    uni.showToast({
                        title: '请填写完整信息',
                        icon: 'none'
                    })
                    return
                }
				// 请求登录
                console.log('登录信息：', {
                    username: this.form.username,
                    password: this.form.password
                })
            } else {
                if (!this.form.username || !this.form.password || 
                    !this.form.phone || !this.form.verifyCode) {
                    uni.showToast({
                        title: '请填写完整信息',
                        icon: 'none'
                    })
                    return
                }
                
                if (this.form.password !== this.form.confirmPassword) {
                    uni.showToast({
                        title: '两次密码不一致',
                        icon: 'none'
                    })
                    return
                }
                
                console.log('注册信息：', {
                    username: this.form.username,
                    phone: this.form.phone,
                    verifyCode: this.form.verifyCode,
                    password: this.form.password
                })
            }
            
            uni.showToast({
                title: this.isLogin ? '登录成功' : '注册成功',
                icon: 'success'
            })
        },
        
        goForgetPassword() {
			uni.showToast({
			    title: '请联系管理员找回',
			    icon: 'none',
                duration: 2000
			})
			return
            // uni.navigateTo({
            //     url: './forget_password'
            // })
        },
        
        showPrivacyPolicy(type) {
            uni.showToast({
                title: `请阅读${type}`,
                icon: 'none',
                duration: 2000
            })
        }
    },
    
    onUnload() {
        // 页面卸载时重置计数器
        this.counting = false
        this.counter = 60
    }
}
</script>

<style lang="scss" scoped>
.login-container {
    min-height: 100vh;
    background: #ffffff;
}

/* 顶部状态栏 */
.status-bar {
    padding: 20rpx 40rpx;
    background: #ffffff;
    position: relative;
    
    .tab-group {
        display: flex;
        position: relative;
        width: 240rpx;
        
        .tab-item {
            flex: 1;
            text-align: center;
            font-size: 32rpx;
            color: #999;
            padding: 20rpx 0;
            transition: all 0.3s;
            
            &.active {
                color: #333;
                font-weight: 500;
            }
        }
        
        .tab-line {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50%;
            height: 4rpx;
            background: #333;
            transition: all 0.3s;
            
            &.tab-line-right {
                transform: translateX(100%);
            }
        }
    }
}

/* 主内容区 */
.content {
    padding: 40rpx;
}

/* 欢迎语 */
.welcome {
    margin: 60rpx 0;
    
    .title {
        font-size: 48rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 16rpx;
        display: block;
    }
    
    .subtitle {
        font-size: 28rpx;
        color: #999;
    }
}

/* 表单样式 */
.form {
    .form-item {
        margin-bottom: 40rpx;
        
        .label {
            font-size: 28rpx;
            color: #666;
            margin-bottom: 16rpx;
            display: block;
        }
        
        input {
            height: 90rpx;
            background: #f8f9fa;
            border-radius: 16rpx;
            padding: 0 30rpx;
            font-size: 30rpx;
            color: #333;
        }
        
        &.verify {
            position: relative;
            
            .verify-btn {
                position: absolute;
                right: 30rpx;
                top: 50%;
                transform: translateY(-10%);
                font-size: 26rpx;
                color: #333;
                background: #fff;
                padding: 10rpx 30rpx;
                border-radius: 30rpx;
                border: 1px solid #eee;
                
                &.disabled {
                    color: #999;
                    background: #f5f5f5;
                }
            }
        }
    }
}

/* 底部区域 */
.bottom {
    margin-top: 80rpx;
    
    .submit-btn {
        width: 100%;
        height: 90rpx;
        line-height: 90rpx;
        background: #333;
        color: #fff;
        font-size: 32rpx;
        font-weight: 500;
        border-radius: 16rpx;
        margin-bottom: 40rpx;
        
        &:active {
            opacity: 0.9;
        }
    }
    
    .tips {
        text-align: center;
        font-size: 24rpx;
        color: #999;
        
        .privacy-check {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24rpx;
            color: #999;
            
            checkbox {
                transform: scale(0.7);
                margin-right: 4rpx;
            }
            
            .link {
                color: #333;
                margin: 0 4rpx;
            }
        }
    }
}

/* 输入框占位符样式 */
.input-placeholder {
    color: #bbb;
    font-size: 28rpx;
}

.password-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .forget-pwd {
        font-size: 24rpx;
        color: #666;
    }
}
</style> 